@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  @apply h-full;
}

body {
  @apply bg-gray-300 text-base;
}

/* purgecss ignore */
body.embedded,
body.sandbox {
  @apply bg-transparent;
}

body.sandbox {
  @apply h-full w-full overflow-hidden;
}

/* purgecss ignore */
body.embedded,
body.embedded #app {
  @apply h-full overflow-hidden p-1;
}

nav a:not(.title):hover,
nav a:not('.no-underline'):hover {
  text-decoration: underline;
}

nav button {
  @apply relative h-full;
}

nav button:after {
  @apply rounded pointer-events-none absolute block w-full scale-95 bg-blue-400 opacity-0;
  content: '';
  height: 4px;
  bottom: 0;
  left: 0;
  transition: all 0.15s;
}

nav button:hover:after {
  @apply scale-100 opacity-100;
}

div[data-reach-dialog-overlay] {
  z-index: 10;
  background: hsla(0, 0%, 0%, 0.33);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

div[data-reach-dialog-content] {
  min-width: 50vw;
  max-width: 80vw;
  margin: 10vh auto;
  background: white;
  padding: 1rem;
  outline: none;
  display: table;
}

div[data-reach-menu-popover] {
  margin-top: -1rem;
  z-index: 10;
  min-width: 12rem;
}

.fade {
  transition: opacity 0.25s;
}

.settings .react-toggle .react-toggle-track {
  @apply bg-gray-400;
  height: 1rem;
  width: 2rem;
}

.settings .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
  @apply bg-gray-600;
}

.settings .react-toggle .react-toggle-thumb {
  height: calc(1rem - 2px);
  width: calc(1rem - 2px);
}

.settings .react-toggle--checked .react-toggle-track {
  @apply bg-blue-400;
}

.settings
  .react-toggle--checked:hover:not(.react-toggle--disabled)
  .react-toggle-track {
  @apply bg-blue-600;
}

.settings .react-toggle--checked .react-toggle-thumb {
  left: calc(1rem + 1px);
  outline: none;
  box-shadow: none;
}

.settings .react-toggle--focus .react-toggle-thumb {
  outline: none;
  box-shadow: none;
}

.pane-menu {
  top: -2rem;
}

.footer {
  transition: opacity 0.2s ease 0s;
}

.footer:not(:hover) {
  opacity: 0.3;
}

.footer > div > span {
  display: inline-block;
  line-height: 0;
}

.bg-inherit {
  background-color: inherit;
}

.rounded-inherit {
  border-radius: inherit;
}

.editor {
  @apply rounded shadow relative grid bg-white;
}

.editor > .h-full-within {
  height: calc(100% - 2rem);
}

.h-half {
  height: 50%;
}

.grid-equal-cells {
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
}

blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  width: 500px;
  margin: 0.25em 0;
  padding: 0.35em 40px;
  line-height: 1.45;
  position: relative;
  color: #383838;
}

blockquote:before {
  @apply text-gray-400;

  font-size: 80px;
  display: block;
  padding-left: 10px;
  content: '\201C';
  position: absolute;
  left: -20px;
  top: -32px;
}

blockquote cite {
  @apply mt-2 block text-sm text-gray-400;
}

blockquote cite:before {
  content: '\2014 \2009';
}

.field {
  @apply rounded border relative cursor-default border-transparent p-1;
  z-index: 0;
  transition: background-color 0.2s ease;
}

.field[data-clickable='false']:hover {
  @apply bg-gray-100;
}

.field[data-clickable='true'] {
  @apply cursor-pointer bg-blue-100;
}

.field[data-clickable='true']:hover {
  @apply bg-blue-200;
}

.field.active {
  @apply border-blue-300;
}

.output {
  @apply whitespace-pre-wrap bg-gray-800 bg-gray-800 p-4 font-mono text-sm text-gray-100;
  overflow-x: auto;
  margin-top: -4px; /* compensate CM border */
  border-radius: 0 0 4px 4px;
}

.error {
  @apply border rounded bg-red-600 p-4 text-white;
}

button {
  @apply inline-flex items-center justify-center;
}

button:focus {
  @apply outline-none;
}

button:disabled {
  opacity: 0.2;
}

.spinner {
  @apply text-blue-400;
  animation: spinAround 1000ms infinite linear;
  transform: scaleX(-1);
}

@keyframes spinAround {
  from {
    transform: scaleX(-1) rotate(360deg);
  }
  to {
    transform: scaleX(-1) rotate(0deg);
  }
}

/**
 * preview styles
 */

.preview {
  @apply mb-2 p-1 text-base;
}

.preview hr {
  @apply my-4;
}

.preview h1,
.preview h2,
.preview h3,
.preview h4,
.preview h5,
.preview h6 {
  @apply mb-2 font-bold;
}

.preview .highlight {
  @apply rounded shadow-outline;
}

.preview a {
  @apply inline-block align-baseline text-sm font-bold text-blue-500;
}

.preview a:hover {
  @apply text-blue-800;
}

.preview label {
  @apply mb-2 block text-sm font-bold text-gray-700;
}

.preview input,
.preview textarea,
.preview select {
  @apply border rounded mb-2 block w-full appearance-none bg-white px-3 py-2 leading-tight text-gray-700;
}

.preview input:focus,
.preview textarea:focus,
.preview select:focus,
.preview button:focus {
  @apply outline-none border border-gray-700;
}

.preview label {
  @apply flex items-center;
}

.preview label > input[type='checkbox'] {
  display: inline-block;
  margin: 0 0.5rem 0 0;
  width: auto;
}

.preview small {
  @apply text-xs text-gray-600;
}

.preview button {
  @apply border rounded border-gray-300 bg-gray-300 px-4 py-2 text-sm text-gray-800;
}

.preview button:hover {
  @apply bg-gray-400;
}

.preview form > div:not(:last-child) {
  @apply mb-4;
}

.expanded .snapshot {
  @apply w-full;
}

.collapsed .snapshot div {
  display: none;
}
